<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人月度统计</title>
  <style>
    body {
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #fff;
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    h2 {
      text-align: center;
      font-size: 2.5rem;
      margin: 30px 0;
      text-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
      position: relative;
      padding-bottom: 15px;
    }

    h2:after {
      content: "";
      display: block;
      width: 150px;
      height: 4px;
      background: linear-gradient(to right, transparent, #00d2ff, transparent);
      margin: 15px auto 0;
      border-radius: 2px;
    }

    .chart-container {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
      padding: 30px;
      margin: 40px auto;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
      max-width: 1000px;
    }

    .chart-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.4);
    }

    #chart {
      width: 100%;
      height: 500px;
    }

    .stats-bar {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 40px 0;
    }

    .stat-item {
      background: rgba(0, 210, 255, 0.1);
      border: 1px solid rgba(0, 210, 255, 0.2);
      border-radius: 10px;
      padding: 20px;
      min-width: 200px;
      text-align: center;
      margin: 10px;
      transition: all 0.3s ease;
    }

    .stat-item:hover {
      background: rgba(0, 210, 255, 0.2);
      transform: scale(1.05);
    }

    .stat-value {
      font-size: 2.2rem;
      font-weight: bold;
      margin: 10px 0;
      background: linear-gradient(to right, #00d2ff, #3a7bd5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .stat-label {
      font-size: 1rem;
      color: rgba(255,255,255,0.7);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .trend-indicator {
      font-size: 0.9rem;
      margin-top: 5px;
    }

    .trend-up {
      color: #4caf50;
    }

    .trend-down {
      color: #f44336;
    }

    @media (max-width: 768px) {
      h2 {
        font-size: 1.8rem;
      }

      .chart-container {
        padding: 15px;
      }

      .stat-item {
        min-width: 150px;
        padding: 15px;
      }

      .stat-value {
        font-size: 1.8rem;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h2>联系人月度新增趋势折线图</h2>

  <div class="stats-bar">
    <div class="stat-item">
      <div class="stat-label">统计月份数</div>
      <div class="stat-value" id="monthCount">0</div>
    </div>
    <div class="stat-item">
      <div class="stat-label">总新增联系人</div>
      <div class="stat-value" id="totalContacts">0</div>
    </div>
    <div class="stat-item">
      <div class="stat-label">最高月份</div>
      <div class="stat-value" id="peakMonth">-</div>
      <div class="stat-label" id="peakValue">0 人</div>
    </div>
    <div class="stat-item">
      <div class="stat-label">月均新增</div>
      <div class="stat-value" id="monthlyAvg">0</div>
      <div class="trend-indicator" id="trendIndicator"></div>
    </div>
  </div>

  <div class="chart-container">
    <div id="chart"></div>
  </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  const months = [[${months}]];
  const counts = [[${counts}]];

  // 计算统计数据
  let totalContacts = 0;
  let peakValue = 0;
  let peakMonth = '';
  let monthlyAvg = 0;
  let trend = 0;

  if (counts.length > 0) {
      totalContacts = counts.reduce((a, b) => a + b, 0);
      peakValue = Math.max(...counts);
      peakMonth = months[counts.indexOf(peakValue)];
      monthlyAvg = Math.round(totalContacts / counts.length);

      // 计算趋势 (最近3个月平均值与前3个月比较)
      if (counts.length >= 6) {
          const recentAvg = counts.slice(-3).reduce((a, b) => a + b, 0) / 3;
          const prevAvg = counts.slice(-6, -3).reduce((a, b) => a + b, 0) / 3;
          trend = ((recentAvg - prevAvg) / prevAvg) * 100;
      }
  }

  // 更新统计卡片
  document.getElementById('monthCount').textContent = months.length;
  document.getElementById('totalContacts').textContent = totalContacts;
  document.getElementById('peakMonth').textContent = peakMonth;
  document.getElementById('peakValue').textContent = peakValue + ' 人';
  document.getElementById('monthlyAvg').textContent = monthlyAvg;

  const trendElement = document.getElementById('trendIndicator');
  if (trend > 0) {
      trendElement.innerHTML = `<span class="trend-up">↑ ${Math.abs(trend).toFixed(1)}%</span>`;
  } else if (trend < 0) {
      trendElement.innerHTML = `<span class="trend-down">↓ ${Math.abs(trend).toFixed(1)}%</span>`;
  } else {
      trendElement.innerHTML = '<span>→ 持平</span>';
  }

  // 初始化图表
  const chart = echarts.init(document.getElementById('chart'));

  // 生成渐变颜色
  function getGradientColor(percent) {
      const colors = [
          {r: 0, g: 210, b: 255},   // #00d2ff
          {r: 58, g: 123, b: 213},  // #3a7bd5
          {r: 156, g: 39, b: 176}   // #9c27b0
      ];

      const segment = 1 / (colors.length - 1);
      const index = Math.min(Math.floor(percent / segment), colors.length - 2);
      const localPercent = (percent % segment) / segment;

      const r = Math.round(colors[index].r + (colors[index+1].r - colors[index].r) * localPercent);
      const g = Math.round(colors[index].g + (colors[index+1].g - colors[index].g) * localPercent);
      const b = Math.round(colors[index].b + (colors[index+1].b - colors[index].b) * localPercent);

      return `rgb(${r}, ${g}, ${b})`;
  }

  // 配置项
  const option = {
      backgroundColor: 'transparent',
      title: {
          text: '月度新增联系人趋势',
          left: 'center',
          textStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'normal'
          },
          subtext: `最近更新: ${months[months.length-1]}`,
          subtextStyle: {
              color: 'rgba(255,255,255,0.7)',
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow',
              shadowStyle: {
                  color: 'rgba(0, 210, 255, 0.2)'
              }
          },
          formatter: function(params) {
              const date = params[0].axisValue;
              const value = params[0].data;
              return `
                  <div style="font-weight:bold;margin-bottom:5px;">${date}</div>
                  <div>新增联系人: <span style="color:#00d2ff;font-weight:bold;">${value}</span></div>
                  <div>占比: <span style="color:#9c27b0;font-weight:bold;">${((value/totalContacts)*100).toFixed(1)}%</span></div>
              `;
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
          type: 'category',
          data: months,
          axisLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          },
          axisLabel: {
              color: 'rgba(255,255,255,0.7)',
              rotate: 30,
              fontSize: 12
          },
          axisTick: {
              alignWithLabel: true,
              lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
              }
          }
      },
      yAxis: {
          type: 'value',
          axisLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          },
          axisLabel: {
              color: 'rgba(255,255,255,0.7)',
              formatter: '{value}'
          },
          splitLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
              }
          }
      },
      series: [{
          name: '新增联系人数量',
          type: 'line',
          data: counts,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          lineStyle: {
              width: 4,
              shadowColor: 'rgba(0, 210, 255, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
          },
          itemStyle: {
              color: function(params) {
                  return getGradientColor(params.dataIndex / counts.length);
              },
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: 'rgba(0, 210, 255, 0.5)',
              shadowBlur: 5
          },
          areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(0, 210, 255, 0.3)' },
                  { offset: 1, color: 'rgba(0, 210, 255, 0.05)' }
              ])
          },
          emphasis: {
              itemStyle: {
                  shadowColor: 'rgba(0, 210, 255, 0.8)',
                  shadowBlur: 10
              },
              lineStyle: {
                  width: 5
              }
          },
          label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: '{c}',
              fontSize: 12,
              shadowColor: '#000',
              shadowBlur: 3
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function(idx) {
              return idx * 100;
          }
      }],
      visualMap: {
          top: 50,
          right: 10,
          pieces: [{
              gt: peakValue * 0.8,
              lte: peakValue,
              color: '#ffeb3b'
          }, {
              gt: peakValue * 0.5,
              lte: peakValue * 0.8,
              color: '#00d2ff'
          }, {
              gt: 0,
              lte: peakValue * 0.5,
              color: '#3a7bd5'
          }],
          outOfRange: {
              color: '#9c27b0'
          },
          textStyle: {
              color: '#fff'
          }
      }
  };

  chart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', function() {
      chart.resize();
  });

  // 添加动画效果
  setTimeout(() => {
      const statItems = document.querySelectorAll('.stat-item');
      statItems.forEach((item, index) => {
          setTimeout(() => {
              item.style.transform = 'translateY(-10px)';
              setTimeout(() => {
                  item.style.transform = 'translateY(0)';
              }, 300);
          }, index * 150);
      });
  }, 1000);
  /*]]>*/
</script>

</body>
</html>